<template>
  <div class="activity-view">
    <el-form :inline="true" class="search-form">
      <el-form-item label="活动名称" style="width: 220px" clearable>
        <el-input v-model="searchForm.name" placeholder="请输入活动名称" />
      </el-form-item>
      <el-form-item label="活动类型">
        <el-select v-model="searchForm.type" placeholder="选择活动类型" style="width: 180px" clearable>
          <el-option
            v-for="item in activityTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="活动状态">
        <el-select v-model="searchForm.status" placeholder="选择活动状态" style="width: 180px" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="activityList" border>
      <el-table-column prop="name" label="活动名称" min-width="150" />
      <el-table-column prop="time" label="活动时间" width="180" />
      <el-table-column prop="location" label="活动地点" width="150" />
      <el-table-column prop="type" label="活动类型" width="100">
        <template #default="scope">
          <el-tag>{{ getActivityTypeName(scope.row.type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="personNum" label="报名人数" width="120">
        <template #default="scope">
          {{ scope.row.personNum }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="success"
            @click="handleParticipants(scope.row)"
          >
            查看报名
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 报名名单对话框 -->
    <el-dialog
      v-model="participantsDialogVisible"
      title="报名名单"
      width="800px"
    >
      <el-table :data="participantsList" border>
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="class" label="班级" width="120" />
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="signupTime" label="报名时间" width="180" />
<!--        <el-table-column prop="status" label="状态" width="100">-->
<!--          <template #default="scope">-->
<!--            <el-tag :type="scope.row.status === '已签到' ? 'success' : 'info'">-->
<!--              {{ scope.row.status }}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="操作" width="100">-->
<!--          <template #default="scope">-->
<!--            <el-button-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              :disabled="scope.row.status === '已签到'"-->
<!--              @click="handleSignIn(scope.row)"-->
<!--            >-->
<!--              ��到-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import myAxios from '../../../plugins/myAxios'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchForm = reactive({
  name: '',
  type: '',
  status: ''
})

const activityTypes = [
  { label: '文化活动', value: '文化活动' },
  { label: '体育活动', value: '体育活动' },
  { label: '志愿服务', value: '志愿服务' },
  { label: '学术讲座', value: '学术讲座' }
]

const statusOptions = [
  { label: '未开始', value: 0 },
  { label: '进行中', value: 1 },
  { label: '已结束', value: 2 }
]

const activityList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)

const participantsDialogVisible = ref(false)
const participantsList = ref([])
const currentActivityId = ref(null)

// 获取活动列表
const getActivityList = async () => {
  try {
    loading.value = true
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm
    }
    const res = await myAxios.get('/admin/activity/list', { params })
    console.log(res)
    activityList.value = res
    total.value = res.length;
  } catch (error) {
    ElMessage.error('获取活动列表失败：' + error)
  } finally {
    loading.value = false
  }
}


// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getActivityList()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  handleSearch()
}

// 获取报名列表
const getParticipantsList = async (activityId) => {
  try {
    loading.value = true
    const res = await myAxios.get(`/admin/activity/participants?activityId=${activityId}`)
    participantsList.value = res
  } catch (error) {
    ElMessage.error('获取报名列表失败：' + error)
  } finally {
    loading.value = false
  }
}

// 查看报名名单
const handleParticipants = async (row) => {
  currentActivityId.value = row.id
  participantsDialogVisible.value = true
  await getParticipantsList(row.id)
}

// 删除活动
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除该活动吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await myAxios.post(`/admin/activity/delete?id=${row.id}`)
    ElMessage.success('删除成功')
    getActivityList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败：' + error)
    }
  }
}

// 编辑活动
const handleEdit = (row) => {
  // 跳转到编辑页面
  router.push(`/admin/activity/edit/${row.id}`)
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  getActivityList()
}

// 页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  getActivityList()
}

// 获取状态标签
const getStatusLabel = (status) => {
  const statusMap = {
    0: '未开始',
    1: '进行中',
    2: '已结束'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    0: 'info',
    1: 'success',
    2: 'warning'
  }
  return types[status] || ''
}

// 获取活动类型名称
const getActivityTypeName = (type) => {
  const found = activityTypes.find(item => item.value === type)
  return found ? found.label : type
}

// 页面加载时获取数据
onMounted(() => {
  getActivityList()
})




</script>

<style scoped>
.activity-view {
  margin-top: 20px;
}
.search-form {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
